<template>
  <div class="edit-tool">
    <div class="tool-left">
      <div class="canvas-config">
        <span class="title">画布大小</span>
        <el-input v-model="canvasStyle.width" size="mini" disabled class="inp" />
        <span class="symbol">X</span>
        <el-input v-model="canvasStyle.height" size="mini" disabled class="inp" />
      </div>
      <div class="canvas-config">
        <span class="title">画布比例</span>
        <el-input v-model="scale" size="mini" class="inp" @input="handleScaleChange" /> %
      </div>
    </div>
    <div class="tool-right">
      <el-button type="text" @click="clearCanvas">清空画布</el-button>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import eventBus from '@/utils/eventBus'
import changeComponentsSizeWithScale from '@/utils/changeComponentsSizeWithScale'
import { debounce, get } from 'lodash'

export default {
  name: 'EditTool',
  data() {
    return {
      scale: 100,
    }
  },
  computed: {
    ...mapState([
      'componentData',
      'canvasStyleData',
      'areaData',
      'curComponent',
      'curCanvasPageIndex',
      'curComponentIndex',
      'isDarkMode',
    ]),
    canvasStyle() {
      return get(this.canvasStyleData, `[${this.curCanvasPageIndex}]`) || {}
    },
  },
  created() {
    eventBus.$on('clearCanvas', this.clearCanvas)
    this.handleScaleChange = debounce(this.handleScaleChange.bind(this), 200)
  },
  mounted() {
    console.log('curCanvasPageIndex----', get(this.canvasStyleData, `[${this.curCanvasPageIndex}]`))
  },
  methods: {
    clearCanvas() {
      this.$store.commit('setCurComponent', {
        component: null,
        index: null,
      })
      this.$store.commit('setPageComponentData', [])
      this.$store.commit('setPageTotalTime')
    },
    handleScaleChange() {
      this.$store.commit('setLastScale', this.scale)
      // 画布比例设一个最小值，不能为 0
      // eslint-disable-next-line no-bitwise
      changeComponentsSizeWithScale(Number(this.scale) || 1)
    },
  },
}
</script>

<style scoped lang="scss">
.edit-tool {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  padding: 0 8px;
  background: var(--main-bg-color);
  display: flex;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  color: #666;

  .inp {
    width: 80px;
  }
  .symbol {
    margin: 0 4px;
    color: #999;
  }
  .canvas-config {
    margin-right: 4px;
    .title {
      margin-right: 4px;
    }
  }
  .tool-left {
    display: flex;
  }
}
</style>
